<template>
  <div class="handscroll-container" :style="containerStyle">
    <!-- 左侧画轴 -->
    <div
        ref="leftEndRef"
        class="scroll scroll-left scroll-left-center"
        :class="{'left-scroll-animation': isOpened}"
    >
      <img :src="leftScrollImage" alt="Left Scroll" class="scroll-image"/>
    </div>

    <!-- 中间底图 -->
    <div class="scroll-bg-img" :class="{'scroll-bg-img-center-an': isOpened,}"
         :style="{'background-image': `url('${encodeURI(contentImage)}')`}"
    >
    </div>

    <!-- 默认插槽 -->
    <div class="scroll-content" :class="{'scroll-bg-img-center-an': isOpened,
     }">
      <slot></slot>
    </div>

    <!-- 右侧画轴 -->
    <div
        ref="rightEndRef"
        class="scroll scroll-right scroll-right-center"
        :class="{'right-scroll-animation': isOpened}"
    >
      <img :src="rightScrollImage" alt="Right Scroll" class="scroll-image"/>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import endImage from '@/assets/Snipaste_2025-05-23_14-13-39(1)(1).png'
import backgroundImage from '@/assets/Snipaste_2025-05-23_14-13-39(1)(2).png'

const leftEndRef = ref(null)
const rightEndRef = ref(null)

const props = defineProps({
  // 容器宽度和高度
  width: {
    type: String,
    default: '800px'
  },
  height: {
    type: String,
    default: '400px'
  },
  // 画轴图片
  leftScrollImage: {
    type: String,
    default: () => endImage,
  },
  rightScrollImage: {
    type: String,
    default: () => endImage,
  },
  scrollImageWidth: {
    type: String,
    default: '20px'
  },
  // 底图图片
  contentImage: {
    type: String,
    default: () => backgroundImage,
  },
  // 初始状态：middle, left, right
  initialState: {
    type: String,
    default: 'middle',
    validator: (value) => ['middle', 'left', 'right'].includes(value)
  },
  // 展开动画持续时间（毫秒）
  animationDuration: {
    type: String,
    default: '2000ms'
  }
})

// 是否展开
const isOpened = ref(false)

// 卷轴展开方法 动画控制
const play = () => {
  isOpened.value = true
}

defineExpose({
  play
})
</script>

<style scoped>
.handscroll-container {
  width: v-bind(width);
  height: v-bind(height);
  position: relative;
}

.scroll {
  position: absolute;
  z-index: 2;
}

.scroll-image {
  width: v-bind(scrollImageWidth);
  height: v-bind(height);
}

.scroll-left {
  top: 0;
  left: 0;
  transform: translateX(0);
}

.scroll-right {
  top: 0;
  right: 0;
  transform: translateX(0);
}

.scroll-left-center {
  top: 0;
  transform: translateX(calc(v-bind(width) / 2 - v-bind(scrollImageWidth)));
}

.scroll-right-center {
  top: 0;
  transform: translateX(calc(v-bind(scrollImageWidth) - v-bind(width) / 2));
}

.left-scroll-animation {
  animation: left-scroll-animation-key v-bind(animationDuration);
  transform: translateX(0);
}

@keyframes left-scroll-animation-key {
  0% {
    transform: translateX(calc(v-bind(width) / 2 - v-bind(scrollImageWidth)));
  }
  100% {
    transform: translateX(0);
  }
}

.right-scroll-animation {
  animation: right-scroll-animation-key v-bind(animationDuration);
  transform: translateX(0);
}

@keyframes right-scroll-animation-key {
  0% {
    transform: translateX(calc(v-bind(scrollImageWidth) - v-bind(width) / 2));
  }
  100% {
    transform: translateX(0);
  }
}

.scroll-bg-img {
  z-index: -1;
  background-repeat: repeat; /* 重复图片 */
  width: v-bind(width); /* 容器宽度为100% */
  height: v-bind(height); /* 容器高度为视口高度的100% */
  clip-path: inset(0 50% 0 50%);
}

.scroll-bg-img-center-an {
  animation: scroll-bg-img-center-an-key v-bind(animationDuration) forwards;
  clip-path: inset(0 0 0 0);
}

@keyframes scroll-bg-img-center-an-key {
  0% {
    clip-path: inset(0 50% 0 50%);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

.scroll-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0 50% 0 50%) ;
}

.block {
  display: block;
}
</style>
